@pie-element/graphing 10.1.1 → 10.1.2-next.1

package/configure.js

@@ -0,0 +1,2 @@
+export { default } from './dist/author/index.js';
+export * from './dist/author/index.js';

package/controller.js

@@ -0,0 +1 @@
+export * from './dist/controller/index.js';

package/dist/author/configure.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @synced-from pie-elements/packages/graphing/configure/src/configure.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Configure extends React.Component {
+    static propTypes: {
+        onModelChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        onConfigurationChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        imageSupport: PropTypes.Requireable<object>;
+        uploadSoundSupport: PropTypes.Requireable<object>;
+        model: PropTypes.Validator<object>;
+        configuration: PropTypes.Validator<object>;
+    };
+    componentDidMount(): void;
+    onRationaleChange: any;
+    onPromptChange: any;
+    onTeacherInstructionsChange: any;
+    render(): React.JSX.Element;
+}
+export default Configure;

package/dist/author/configure.js

@@ -0,0 +1,208 @@
+import e from "./graphing-config.js";
+import t from "./correct-response.js";
+import n from "react";
+import r from "prop-types";
+import { styled as i } from "@mui/material/styles";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "debug";
+import { intersection as c } from "@pie-element/shared-lodash";
+import l from "@mui/material/Typography";
+import { InputContainer as u, layout as d, settings as f } from "@pie-lib/config-ui";
+import p from "@pie-lib/editable-html-tip-tap";
+//#region src/author/configure.tsx
+var { Panel: ee, toggle: m, radio: h, checkboxes: te, textField: ne, dropdown: re } = f, ie = s("@pie-element:graphing:configure"), g = i(u)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), ae = i(l)(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), _ = i("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), v = class extends n.Component {
+	static propTypes = {
+		onModelChanged: r.func,
+		onConfigurationChanged: r.func,
+		imageSupport: r.object,
+		uploadSoundSupport: r.object,
+		model: r.object.isRequired,
+		configuration: r.object.isRequired
+	};
+	componentDidMount() {
+		let { configuration: e, onModelChanged: t, model: n } = this.props, { availableTools: r, title: i, graphDimensions: a } = e || {}, { arrows: o, titleEnabled: s, dimensionsEnabled: l } = n || {};
+		typeof o == "boolean" && (o = o ? {
+			left: !0,
+			right: !0,
+			up: !0,
+			down: !0
+		} : {
+			left: !1,
+			right: !1,
+			up: !1,
+			down: !1
+		});
+		let u = c(r || [], n.toolbarTools || []), d = s ?? i.enabled, f = l ?? a.enabled;
+		t && t({
+			...n,
+			arrows: o,
+			toolbarTools: u,
+			titleEnabled: d,
+			dimensionsEnabled: f
+		});
+	}
+	onRationaleChange = (e) => {
+		let { onModelChanged: t, model: n } = this.props;
+		t({
+			...n,
+			rationale: e
+		});
+	};
+	onPromptChange = (e) => {
+		let { onModelChanged: t, model: n } = this.props;
+		t({
+			...n,
+			prompt: e
+		});
+	};
+	onTeacherInstructionsChange = (e) => {
+		let { onModelChanged: t, model: n } = this.props;
+		t({
+			...n,
+			teacherInstructions: e
+		});
+	};
+	render() {
+		let { model: n, configuration: r, onConfigurationChanged: i, onModelChanged: s, imageSupport: c, uploadSoundSupport: l } = this.props, { arrows: u = {}, authoring: f = {}, availableTools: v = [], baseInputConfiguration: y = {}, coordinatesOnHover: b = {}, contentDimensions: x = {}, gridConfigurations: S = [], graphDimensions: C = {}, instruction: w = {}, labels: T = {}, padding: E = {}, prompt: D = {}, rationale: O = {}, scoringType: k = {}, settingsPanelDisabled: A, spellCheck: j = {}, studentInstructions: M = {}, teacherInstructions: N = {}, title: P = {}, maxImageWidth: F = {}, maxImageHeight: I = {}, withRubric: L = {}, language: R = {}, languageChoices: z = {}, mathMlOptions: B = {}, removeIncompleteTool: V = !1 } = r || {}, { errors: H = {}, extraCSSRules: U, labelsEnabled: W, dimensionsEnabled: G, promptEnabled: K, rationaleEnabled: oe, spellCheckEnabled: q, teacherInstructionsEnabled: se, titleEnabled: ce } = n || {}, { prompt: J, rationale: Y, teacherInstructions: X } = H || {};
+		ie("[render] model", n);
+		let Z = F && F.prompt, Q = I && I.prompt, le = {
+			top: T.top,
+			right: T.right,
+			bottom: T.bottom,
+			left: T.left
+		}, ue = {
+			arrows: u.settings && te(u.label, {
+				left: u.left,
+				right: u.right,
+				up: u.up,
+				down: u.down
+			}),
+			titleEnabled: P.settings && m(P.label),
+			padding: E.settings && m(E.label),
+			labelsEnabled: T.settings && m(T.label),
+			"language.enabled": R.settings && m(R.label, !0),
+			language: R.settings && R.enabled && re(z.label, z.options),
+			dimensionsEnabled: C.settings && m(C.label),
+			coordinatesOnHover: b.settings && m(b.label)
+		}, de = {
+			"authoring.enabled": f.settings && m(f.label, !0),
+			teacherInstructionsEnabled: N.settings && m(N.label),
+			studentInstructionsEnabled: M.settings && m(M.label),
+			promptEnabled: D.settings && m(D.label),
+			rationaleEnabled: O.settings && m(O.label),
+			spellCheckEnabled: j.settings && m(j.label),
+			scoringType: k.settings && h(k.label, ["dichotomous", "partial scoring"]),
+			rubricEnabled: L?.settings && m(L?.label),
+			instruction: w.settings && ne(w.label)
+		}, $ = (e = {}) => ({
+			...y,
+			...e
+		});
+		return /* @__PURE__ */ o(d.ConfigLayout, {
+			extraCSSRules: U,
+			dimensions: x,
+			hideSettings: A,
+			settings: /* @__PURE__ */ a(ee, {
+				model: n,
+				configuration: r,
+				onChangeModel: s,
+				onChangeConfiguration: i,
+				groups: {
+					Settings: ue,
+					Properties: de
+				}
+			}),
+			children: [
+				/* @__PURE__ */ a(ae, {
+					component: "div",
+					variant: "body1",
+					children: w?.label || ""
+				}),
+				se && /* @__PURE__ */ o(g, {
+					label: N.label,
+					children: [/* @__PURE__ */ a(p, {
+						markup: n.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChange,
+						imageSupport: c,
+						error: X,
+						nonEmpty: !1,
+						pluginProps: $(N?.inputConfiguration),
+						spellCheck: q,
+						maxImageWidth: F && F.teacherInstructions || Z,
+						maxImageHeight: I && I.teacherInstructions || Q,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: B
+					}), X && /* @__PURE__ */ a(_, { children: X })]
+				}),
+				K && /* @__PURE__ */ o(g, {
+					label: D.label,
+					children: [/* @__PURE__ */ a(p, {
+						markup: n.prompt,
+						onChange: this.onPromptChange,
+						imageSupport: c,
+						error: J,
+						nonEmpty: !1,
+						spellCheck: q,
+						pluginProps: $(D?.inputConfiguration),
+						disableUnderline: !0,
+						maxImageWidth: Z,
+						maxImageHeight: Q,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: B
+					}), J && /* @__PURE__ */ a(_, { children: J })]
+				}),
+				/* @__PURE__ */ a(e, {
+					authoring: f,
+					availableTools: v,
+					gridConfigurations: S,
+					graphDimensions: C,
+					labelsPlaceholders: le,
+					model: n,
+					showLabels: W,
+					dimensionsEnabled: G,
+					showTitle: ce,
+					titlePlaceholder: P.placeholder,
+					onChange: this.props.onModelChanged,
+					mathMlOptions: B,
+					removeIncompleteTool: V
+				}),
+				/* @__PURE__ */ a(t, {
+					availableTools: v,
+					errors: H,
+					model: n,
+					onChange: this.props.onModelChanged,
+					mathMlOptions: B,
+					removeIncompleteTool: V
+				}),
+				oe && /* @__PURE__ */ o(g, {
+					label: O.label || "Rationale",
+					children: [/* @__PURE__ */ a(p, {
+						markup: n.rationale || "",
+						onChange: this.onRationaleChange,
+						imageSupport: c,
+						error: Y,
+						spellCheck: q,
+						pluginProps: $(O?.inputConfiguration),
+						maxImageWidth: F && F.rationale || Z,
+						maxImageHeight: I && I.rationale || Q,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: B
+					}), Y && /* @__PURE__ */ a(_, { children: Y })]
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { v as default };

package/dist/author/correct-response.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @synced-from pie-elements/packages/graphing/configure/src/correct-response.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+export declare const Tools: {
+    ({ availableTools, defaultTool, hasErrors, toolbarTools, toggleToolBarTool, onDefaultToolChange, }: {
+        availableTools: any;
+        defaultTool: any;
+        hasErrors: any;
+        toolbarTools: any;
+        toggleToolBarTool: any;
+        onDefaultToolChange: any;
+    }): React.JSX.Element;
+    propTypes: {
+        toolbarTools: PropTypes.Requireable<(string | null | undefined)[]>;
+        toggleToolBarTool: PropTypes.Requireable<(...args: any[]) => any>;
+        availableTools: PropTypes.Requireable<any[]>;
+        defaultTool: PropTypes.Requireable<string>;
+        hasErrors: PropTypes.Requireable<number>;
+        onDefaultToolChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export declare class CorrectResponse extends React.Component {
+    static propTypes: {
+        availableTools: PropTypes.Requireable<any[]>;
+        errors: PropTypes.Requireable<object>;
+        model: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        toolbarTools: PropTypes.Requireable<unknown[]>;
+    };
+    state: {
+        dialog: {
+            open: boolean;
+        };
+    };
+    componentDidMount(): void;
+    handleAlertDialog: (open: any, callback: any) => void;
+    changeMarks: any;
+    filterMarks: any;
+    changeToolbarTools: any;
+    updateModel: any;
+    toggleToolBarTool: any;
+    onDefaultToolChange: any;
+    addAlternateResponse: any;
+    deleteAlternateResponse: any;
+    render(): React.JSX.Element;
+}
+export default CorrectResponse;

package/dist/author/correct-response.js

@@ -0,0 +1,303 @@
+import * as e from "react";
+import { renderMath as t } from "@pie-element/shared-math-rendering-mathjax";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import { GraphContainer as i } from "@pie-lib/graphing";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { isEqual as s, set as c } from "@pie-element/shared-lodash";
+import { AlertDialog as l } from "@pie-lib/config-ui";
+import { MenuItem as u, Select as d, Tooltip as f, Typography as p } from "@mui/material";
+import m from "react-dom";
+import h from "@mui/icons-material/Delete";
+import g from "@mui/icons-material/Info";
+//#region src/author/correct-response.tsx
+var _ = "#D5D5D5", v = "#AAAAAA", y = r("div")({ color: v }), b = r("div")(({ theme: e }) => ({
+	margin: `${e.spacing(2.5)} 0`,
+	cursor: "pointer",
+	background: e.palette.grey[200],
+	padding: e.spacing(1.5),
+	width: "fit-content",
+	borderRadius: "4px",
+	"&:hover": { background: _ }
+})), x = r("div")(({ theme: e }) => ({
+	marginTop: e.spacing(1),
+	display: "flex",
+	flexWrap: "wrap"
+})), S = r("div")(({ theme: e }) => ({
+	cursor: "pointer",
+	margin: e.spacing(1),
+	padding: e.spacing(1),
+	border: `2px solid ${e.palette.common.white}`,
+	textTransform: "capitalize",
+	"&:hover": { color: e.palette.grey[800] }
+})), C = r(S)({
+	background: _,
+	border: `2px solid ${v}`
+}), w = r("div")(({ theme: e }) => ({
+	display: "flex",
+	alignItems: "center",
+	marginTop: e.spacing(2.5)
+})), T = r("div")(({ theme: e }) => ({
+	marginLeft: "6px",
+	color: e.palette.grey[600],
+	"&:hover": {
+		cursor: "pointer",
+		color: e.palette.common.black
+	}
+})), E = r("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), D = r(({ className: e, ...t }) => /* @__PURE__ */ a(f, {
+	...t,
+	classes: { tooltip: e }
+}))(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), O = r(p)(({ theme: e }) => ({
+	marginTop: e.spacing(1.5),
+	marginBottom: e.spacing(1)
+})), k = r("div")({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+}), A = r("div")({
+	display: "flex",
+	alignItems: "center",
+	width: "300px"
+}), j = r(d)(({ theme: e }) => ({
+	marginLeft: e.spacing(1),
+	textTransform: "uppercase",
+	color: e.palette.grey[800]
+})), M = r(u)({ textTransform: "uppercase" }), N = r("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	marginTop: e.spacing(1)
+})), P = ({ availableTools: e, defaultTool: t, hasErrors: n, toolbarTools: r, toggleToolBarTool: i, onDefaultToolChange: s }) => {
+	let c = e || [], l = c.includes("label"), u = (r || []).filter((e) => e !== "label");
+	return l && (c = [...c.filter((e) => e !== "label"), "label"]), /* @__PURE__ */ o(y, { children: [/* @__PURE__ */ o(k, { children: [/* @__PURE__ */ a("span", { children: "GRAPHING TOOLS" }), u.length > 0 && /* @__PURE__ */ o(A, { children: [/* @__PURE__ */ a("span", { children: "Default graphing tool:" }), /* @__PURE__ */ a(j, {
+		variant: "standard",
+		onChange: s,
+		value: t,
+		disableUnderline: !0,
+		MenuProps: { transitionDuration: {
+			enter: 225,
+			exit: 195
+		} },
+		children: u.map((e, t) => /* @__PURE__ */ a(M, {
+			value: e,
+			children: e
+		}, t))
+	})] })] }), /* @__PURE__ */ a(x, { children: c.map((e) => /* @__PURE__ */ a(r.find((t) => t === e) ? C : S, {
+		style: { ...n && e !== "label" && { color: "red" } },
+		onClick: () => i(e),
+		children: e.toUpperCase()
+	}, e)) })] });
+};
+P.propTypes = {
+	toolbarTools: n.arrayOf(n.string),
+	toggleToolBarTool: n.func,
+	availableTools: n.array,
+	defaultTool: n.string,
+	hasErrors: n.number,
+	onDefaultToolChange: n.func
+};
+var F = class extends e.Component {
+	static propTypes = {
+		availableTools: n.array,
+		errors: n.object,
+		model: n.object.isRequired,
+		onChange: n.func.isRequired,
+		toolbarTools: n.arrayOf(n.String)
+	};
+	state = { dialog: { open: !1 } };
+	componentDidMount() {
+		try {
+			t(m.findDOMNode(this));
+		} catch {
+			console.error("DOM not mounted");
+		}
+	}
+	handleAlertDialog = (e, t) => this.setState({ dialog: { open: e } }, t);
+	changeMarks = (e, t) => {
+		let { model: n, onChange: r } = this.props;
+		c(n, `answers.${e}.marks`, t), r(n);
+	};
+	filterMarks = (e) => {
+		let { model: { answers: t } } = this.props;
+		return Object.entries(t || {}).reduce((t, [n, r]) => (t[n] = {
+			...r,
+			marks: (r.marks || []).filter((t) => t.type !== e)
+		}, t), {});
+	};
+	changeToolbarTools = (e) => {
+		let { model: t, onChange: n } = this.props;
+		t.toolbarTools = e, n(t);
+	};
+	updateModel = (e) => {
+		let { model: t, onChange: n } = this.props;
+		n({
+			...t,
+			...e
+		});
+	};
+	toggleToolBarTool = (e) => {
+		let { model: { defaultTool: t, toolbarTools: n, answers: r = {} } } = this.props, i = [...n], a = t, o = n.findIndex((t) => e === t);
+		if (o >= 0) {
+			let n = this.filterMarks(e);
+			if (i.splice(o, 1), e === t) {
+				let e = (i || []).filter((e) => e !== "label");
+				a = e.length && e[0] || "";
+			}
+			if (!s(r, n)) {
+				this.setState({ dialog: {
+					open: !0,
+					title: "Warning",
+					text: `Correct answer includes one or more ${e} objects and all of them will be deleted.`,
+					onConfirm: () => this.handleAlertDialog(!1, this.updateModel({
+						toolbarTools: i,
+						answers: n,
+						defaultTool: a
+					})),
+					onClose: () => this.handleAlertDialog(!1)
+				} });
+				return;
+			}
+		} else i.push(e), t === "" && e !== "label" && (a = e);
+		this.updateModel({
+			toolbarTools: i,
+			defaultTool: a
+		});
+	};
+	onDefaultToolChange = (e) => {
+		let { value: t } = e.target;
+		this.updateModel({ defaultTool: t });
+	};
+	addAlternateResponse = () => {
+		let { model: e, onChange: t } = this.props, { answers: n } = e || {}, r = Object.keys(n || {});
+		c(e, `answers.${`alternate${r.length}`}`, {
+			name: `Alternate ${r.length}`,
+			marks: []
+		}), t(e);
+	};
+	deleteAlternateResponse = (e, t) => {
+		let { model: n, onChange: r } = this.props, { answers: i } = n || {}, { marks: a = [], name: o } = t || {}, s = () => {
+			delete i[e];
+			let t = Object.entries(i).reduce((e, t, n) => {
+				let [r, i] = t;
+				return r === "correctAnswer" ? {
+					...e,
+					[r]: i
+				} : {
+					...e,
+					["alternate" + n]: {
+						...i,
+						name: `Alternate ${n}`
+					}
+				};
+			}, {});
+			r({
+				...n,
+				answers: t
+			});
+		};
+		if (a.length) {
+			this.setState({ dialog: {
+				open: !0,
+				title: "Warning",
+				text: `${o} includes one or more shapes and the entire response will be deleted.`,
+				onConfirm: () => this.handleAlertDialog(!1, s),
+				onClose: () => this.handleAlertDialog(!1)
+			} });
+			return;
+		}
+		s();
+	};
+	render() {
+		let { availableTools: t, errors: n, model: r, mathMlOptions: s = {}, removeIncompleteTool: c } = this.props, { dialog: u } = this.state, { answers: d = {}, arrows: f, backgroundMarks: m, coordinatesOnHover: _, defaultTool: v, domain: y, graph: x = {}, labels: S, labelsEnabled: C, range: k, title: A, titleEnabled: j, toolbarTools: M } = r || {}, { correctAnswerErrors: F = {}, toolbarToolsError: I } = n || {};
+		return /* @__PURE__ */ o("div", { children: [
+			/* @__PURE__ */ a(p, {
+				component: "div",
+				variant: "h6",
+				children: "Define Tool Set and Correct Response"
+			}),
+			/* @__PURE__ */ a(O, {
+				component: "div",
+				variant: "body1",
+				children: "Use this interface to choose which graphing tools students will be able to use, and to define the correct answer"
+			}),
+			/* @__PURE__ */ a(P, {
+				availableTools: t,
+				defaultTool: v,
+				hasErrors: !!I,
+				onDefaultToolChange: this.onDefaultToolChange,
+				toggleToolBarTool: this.toggleToolBarTool,
+				toolbarTools: M
+			}),
+			I && /* @__PURE__ */ a(N, { children: I }),
+			Object.entries(d || {}).map(([t, n]) => {
+				let { marks: r = [], name: l } = n || {};
+				return /* @__PURE__ */ o(e.Fragment, { children: [
+					/* @__PURE__ */ o(w, { children: [
+						/* @__PURE__ */ a(E, { children: l }),
+						t === "correctAnswer" && /* @__PURE__ */ a(D, {
+							disableFocusListener: !0,
+							disableTouchListener: !0,
+							placement: "right",
+							title: "At least 1 graph object should be defined.",
+							children: /* @__PURE__ */ a(g, {
+								fontSize: "small",
+								color: "primary",
+								style: {
+									marginLeft: "8px",
+									marginBottom: "auto"
+								}
+							})
+						}),
+						t !== "correctAnswer" && /* @__PURE__ */ a(T, {
+							onClick: () => this.deleteAlternateResponse(t, n),
+							children: /* @__PURE__ */ a(h, {})
+						})
+					] }),
+					/* @__PURE__ */ a(i, {
+						style: F[t] && { border: "2px solid red" },
+						axesSettings: { includeArrows: f },
+						backgroundMarks: m.filter((e) => !e.building),
+						coordinatesOnHover: _,
+						disabledLabels: !0,
+						disabledTitle: !0,
+						domain: y,
+						draggableTools: t === "correctAnswer",
+						labels: S,
+						marks: r,
+						onChangeMarks: (e) => this.changeMarks(t, e),
+						range: k,
+						showLabels: C,
+						showTitle: j,
+						size: {
+							width: x.width,
+							height: x.height
+						},
+						title: A,
+						toolbarTools: M,
+						onChangeTools: (e) => this.updateModel({ toolbarTools: e }),
+						mathMlOptions: s,
+						removeIncompleteTool: c,
+						limitLabeling: !0
+					}),
+					F[t] && /* @__PURE__ */ a(N, { children: F[t] })
+				] }, `correct-response-graph-${l}`);
+			}),
+			/* @__PURE__ */ a(b, {
+				onClick: this.addAlternateResponse,
+				children: "ADD ALTERNATE"
+			}),
+			/* @__PURE__ */ a(l, {
+				open: u.open,
+				title: u.title,
+				text: u.text,
+				onClose: u.onClose,
+				onConfirm: u.onConfirm
+			})
+		] });
+	}
+};
+//#endregion
+export { F as default };